<template>
  <div class="acceptanceRate">
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      width="600"
      style="padding: 0"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <div>
            <h4 :id="titleId" :class="titleClass">
              {{
                isFromMajor
                  ? schoolInfo.professionRealName
                  : schoolInfo.collegeName
              }}
            </h4>
          </div>
          <el-icon
            color="#ccc"
            class="no-inherit"
            size="26"
            @click="dialogVisible = false"
          >
            <Close />
          </el-icon>
        </div>
      </template>
      <div class="school-strength">
        <div style="position: relative">
          <div style="display: flex; align-items: center; position: relative">
            <img
              style="width: 80px; height: 80px"
              src="@/assets/images/AI_img_1.png"
              alt=""
            />
            <img class="imgE" src="@/assets/images/AI_img_0.png" alt="" />
            <span style="font-size: 16px; margin-left: 10px">
              录取概率
              <span
                :class="
                  schoolInfo.chance_lv == 1
                    ? 'chance1'
                    : schoolInfo.chance_lv == 2
                      ? 'chance2'
                      : 'chance3'
                "
                >{{ schoolInfo.chance }}%</span
              >
            </span>
          </div>
          <div class="school-detail">
            <!-- {{ schoolInfo.professionName }} -->
            <span v-for="(char, index) in visibleChars" :key="index">{{
              char
            }}</span>
          </div>
        </div>
        <div class="school-data">
          <div style="margin-bottom: 10px">
            <div class="nav-tab">
              <span :class="{ active: activeTab === 1 }" @click="switchTab(1)">
                等效分对比
              </span>
              <span style="margin: 0 8px">|</span>
              <span :class="{ active: activeTab === 2 }" @click="switchTab(2)">
                线差对比
              </span>
            </div>
          </div>
          <div>
            <p v-show="activeTab == 1" class="describe">
              等效分是考生当年位次换算成历年等效分，并结合历年一分一段表对应的分值。等效分差反映的是考生能否考上目标志愿之间的差距，分值越大录取概率越高，反之则越低。
            </p>
            <p v-show="activeTab == 2" class="describe">
              线差是指考生总分/目标志愿与各批次历年省控线的差值。通过线差对比可以反映出考生分数与目标志愿之间的差距，线差分差越大录取概率越高，反之则越低。
            </p>
            <div class="equivalent">
              <span v-show="activeTab == 1"
                >历年平均等效分差
                <span :class="numDxf < 0 ? 'low' : 'high'"
                  ><span v-if="numDxf < 0">低</span><span v-else>高</span
                  ><span class="fraction">{{ Math.abs(numDxf) }}</span
                  >分</span
                ></span
              >
              <span v-show="activeTab == 2">
                <span
                  >历年平均线差
                  <span :class="numDxf < 0 ? 'low' : 'high'"
                    ><span v-if="numDxf < 0">低</span><span v-else>高</span
                    ><span class="fraction">{{ Math.abs(numDxf) }}</span
                    >分</span
                  ></span
                >
                <span style="margin: 0 12px">|</span>
                <span
                  >我的线差<span class="fraction">{{ numXx }}</span
                  >分</span
                >
              </span>
            </div>
            <div>
              <EChartWrapper
                :type="'bar'"
                :options="pieChartOptions"
                :hight="'100px'"
              />
            </div>
            <el-table
              v-show="activeTab == 1"
              :data="tableDataDxf"
              style="width: 100%"
            >
              <el-table-column prop="date" label="类型/年份" />
              <el-table-column
                v-for="item in yearArr"
                :prop="item.toString()"
                :label="item + '年'"
                :key="item"
              />
            </el-table>
            <el-table
              v-show="activeTab == 2"
              :data="tableDataXx"
              style="width: 100%"
            >
              <el-table-column prop="date" label="类型/年份" />
              <el-table-column
                v-for="item in yearArr"
                :prop="item.toString()"
                :label="item + '年'"
                :key="item"
              />
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import EChartWrapper from '@/components/ECharts';
import { getShowTextApi } from '@/modules/volunteer/api.js';
const dialogVisible = ref(false);
const schoolInfo = ref({});
const activeTab = ref(1);
const switchTab = (tabIndex) => {
  activeTab.value = tabIndex;
};
const pieChartOptions = ref({});
const visibleChars = ref([]);
//是否是专业点进去
const isFromMajor = ref(false);
const numDxf = ref(0); //等效分差平均数
const numXx = ref(0); //线差平均数
const tableDataDxf = ref([]);
//tableDataDxf如果改变下面逻辑代码就不对了，慎重修改！
//等效分
tableDataDxf.value = [
  {
    date: '考生等效分',
  },
  {
    date: '目标志愿最低分',
  },
  {
    date: '等效分差',
  },
];
//线差
const tableDataXx = ref([]);
tableDataXx.value = [
  {
    date: '省控线',
  },
  {
    date: '目标志愿历年线差',
  },
  {
    date: '线差分差',
  },
];
const yearArr = ref([]);
const eCharData = ref([]);
const eCharDataOption = ref([]);
let interval;
const open = (data, isMajor, equivalents, batchs) => {
  if (interval) {
    clearInterval(interval); // 停止定时器
  }
  isFromMajor.value = isMajor;
  dialogVisible.value = true;
  schoolInfo.value = data;
  yearArr.value = data.moreYear.map((e) => {
    return e.year;
  });

  tableDataDxf.value.forEach((item) => {
    if (item.date == '考生等效分') {
      yearArr.value.forEach((e) => {
        item[e] = equivalents.value[e].eqScore;
      });
    }

    if (item.date == '目标志愿最低分') {
      data.moreYear.forEach((i) => {
        item[i.year] = i.minScore;
      });
    }

    if (item.date == '等效分差') {
      yearArr.value.forEach((e) => {
        if (tableDataDxf.value[0][e] == 0 || tableDataDxf.value[1][e] == '-') {
          item[e] = '-';
        } else {
          item[e] = tableDataDxf.value[0][e] - tableDataDxf.value[1][e];
        }
      });
    }
  });

  eCharData.value = [];
  yearArr.value.forEach((e) => {
    eCharData.value.push(
      tableDataDxf.value[2][e] == '-' ? 0 : tableDataDxf.value[2][e]
    );
  });
  //每次弹窗时清空数据
  let dxfIndex = 0;
  numDxf.value = 0;
  numXx.value = 0;
  eCharDataOption.value = [];
  eCharData.value.forEach((item) => {
    if (item != 0) {
      numDxf.value += item;
      dxfIndex++;
    }
    if (item < 0) {
      eCharDataOption.value.push({
        value: item,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ffcb98' },
            { offset: 1, color: '#ff7d00' },
          ]),
          borderRadius: [0, 0, 5, 5], // 分别设置左上、右上、右下、左下的圆角
        },
      });
    } else {
      eCharDataOption.value.push({
        value: item,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: '#b9d9ff' },
            { offset: 0, color: '#7ea5ff' },
          ]),
          borderRadius: [5, 5, 0, 0], // 分别设置左上、右上、右下、左下的圆角
        },
      });
    }
  });
  numDxf.value = dxfIndex == 0 ? 0 : Math.round(numDxf.value / dxfIndex);
  eChartInt();

  tableDataXx.value.forEach((item) => {
    if (item.date == '省控线') {
      yearArr.value.forEach((e) => {
        item[e] = batchs.value[e] || '-';
      });
    }

    if (item.date == '目标志愿历年线差') {
      data.moreYear.forEach((i) => {
        item[i.year] = i.lineDiff;
        if (item[i.year] != '-') {
          numXx.value += item[i.year] * 1;
        }
      });
    }

    if (item.date == '线差分差') {
      yearArr.value.forEach((e) => {
        item[e] = tableDataDxf.value[2][e];
        if (item[e] != '-') {
          numXx.value += item[e] * 1;
        }
      });
    }
  });
  numXx.value = dxfIndex == 0 ? 0 : Math.round(numXx.value / dxfIndex);

  getShowTextApi({
    rate: schoolInfo.value.chance,
    replace: [
      isFromMajor.value
        ? schoolInfo.value.professionRealName
        : schoolInfo.value.collegeName,
      schoolInfo.value.chance,
      numDxf.value,
      numXx.value,
    ],
  }).then((res) => {
    const fullText = res.data.text || '';
    let index = 0; // 初始化索引
    visibleChars.value = [];
    // 使用 setInterval 来逐个显示字符
    interval = setInterval(() => {
      if (index < fullText.length) {
        visibleChars.value.push(fullText[index]); // 将当前字符加入到 visibleChars
        index++;
      } else {
        clearInterval(interval); // 停止定时器
      }
    }, 100); // 每200毫秒显示一个字符，可以根据需求调整间隔
  });
};
// eCharts图表
const eChartInt = function () {
  pieChartOptions.value = {
    xAxis: {
      type: 'category',
      data: yearArr.value,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: eCharDataOption.value,
        type: 'bar',
        barWidth: 40, // 设置固定宽度
      },
    ],
  };
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.acceptanceRate {
  .my-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 16px 0 16px;
  }
  .imgE {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    animation: opacityImg 1s linear infinite;
  }
  @keyframes opacityImg {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  .chance1 {
    color: #f53f3f;
  }

  .chance2 {
    color: #ff8c33;
  }

  .chance3 {
    color: #00bf10;
  }
  .low {
    color: #ff7d00;
  }
  .high {
    color: #00b56a;
  }
  .fraction {
    font-size: 18px;
    margin: 0 4px;
  }
  .school-strength {
    height: 600px;
    overflow-y: auto; /* 使 Y 轴有滚动条 */
    background: linear-gradient(180deg, #fff 3%, #f8f8f8 5%), #f8f8f8;
    padding: 0 16px 20px 16px;
    box-sizing: border-box;
  }
  .school-strength::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  .school-detail {
    padding: 20px 10px;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #f5f4e9;
    font-size: 12px;
    background-image: url(@/assets/images/dxfXx.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .school-data {
    padding: 20px 10px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 10px;
    border: 1px solid #fff;
    border-radius: 8px;
    background-image: linear-gradient(
        180deg,
        hsla(0, 0%, 100%, 0) 7%,
        #fff 58%
      ),
      linear-gradient(98deg, #dce5ff, rgba(220, 242, 255, 0.6) 89%);
    background-size: 100% 90px;
    background-repeat: no-repeat;
    background-color: #fff;
    .describe {
      color: #8ca5d0;
      line-height: 18px;
      font-size: 12px;
      margin-bottom: 24px;
    }
  }
  .nav-tab {
    font-size: 18px;
    font-weight: 600;
    color: #86909c;
    cursor: pointer;
  }

  .nav-tab span.active {
    color: #000; /* 激活时的颜色 */
    font-weight: bold; /* 可以增加加粗效果 */
  }
  .equivalent {
    display: flex;
    padding: 12px 0 10px 12px;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#f0f7ff),
      color-stop(93%, rgba(233, 243, 255, 0.1))
    );
    background: linear-gradient(90deg, #f0f7ff, rgba(233, 243, 255, 0.1) 93%);
    border-radius: 4px;
    line-height: 14px;
    color: #4e5969;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid;
    -o-border-image: linear-gradient(
        89deg,
        #d9eaff 2%,
        rgba(233, 243, 255, 0.1) 93%
      )
      1;
    border-image: linear-gradient(
        89deg,
        #d9eaff 2%,
        rgba(233, 243, 255, 0.1) 93%
      )
      1;
    margin-top: 16px;
  }
}
</style>
